<template>
    <div>
        <!--顶部导航-->
        <topAdv :isShow="isShow"></topAdv>
        <div id="top-nav-box" >
            <topNavlist></topNavlist>
        </div>
        <!--轮播图-->
        <div>
            <div class="block">
                <el-carousel trigger="click">
                    <el-carousel-item v-for="(item,index) in swiperList" :key=index>
                        <div class="swiper-item" :style="'background-image: url('+item.imgUrlPc+')'"></div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <!--直播课程-->
        <div id="live-box">
            <h2>直播课程</h2>
            <div id="live-content">
                <div id="livePosters">
                    <img :src="imgSrcList[3]" ref="showingImg">
                    <div class="falseBox"></div>
                    <div class="trueBox">
                        <p class="liveTitles" ref="liveTitle">研究生复试之高效准备简历的方法</p>
                        <h3 class="liveSta"><span><i class="el-icon-circle-check"></i>直播结束</span></h3>
                        <el-row>
                            <el-button type="success" class="liveBtn">直播结束</el-button>
                        </el-row>
                    </div>
                </div>
                <div id="liveList">
                    <ul>
                        <li v-for="(item,index) in liveData" :key="index" v-on:mouseover="changeColor(index)" :class="[flag==index?'saveColor':'']">
                            <span class="greenBlock"></span>
                            <span class="liveStatus">{{item.liveStatus}}</span>
                            <span class="hook"><i class="el-icon-circle-check"></i></span>
                            <span>{{item.livecontent}}</span>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <!--免费课程-->
        <courseBox type="free" page-num="10" page-size="1"></courseBox>
        <!--精品课程-->
        <courseBox type="boutique" page-num="5" page-size="2"></courseBox>
        <!--限时折扣课程-->
        <courseBox type="discount" page-num="5" page-size="1"></courseBox>
        <!--底部-->
        <footNav></footNav>
    </div>
</template>

<script>
    import topAdv from "../../components/topAdv";
    import topNavlist from "../../components/topNavlist";
    import courseBox from "./components/courseBox";
    import footNav from "../../components/footNav";
    import {getSlideShow} from "../../../api";


    export default {
        name: "index",
        methods:{
            changeColor(params){
                this.$refs.showingImg.src = this.imgSrcList[params];
                this.$refs.liveTitle.innerText=this.liveData[params].livecontent;
                this.flag = params;
            }
        },
        components:{
            topAdv,
            topNavlist,
            courseBox,
            footNav
        },
        data(){
            return {
                swiperList:[],
                isShow:false,
                liveData:[
                    {liveStatus:"直播结束",livecontent:'研究生复试之高效准备简历的方法'},
                    {liveStatus:"直播结束",livecontent:'十大经典排序之Part-6-完结篇'},
                    {liveStatus:"直播结束",livecontent:'jdk1.8-新特性之函数接口与方法引用'},
                    {liveStatus:"直播结束",livecontent:'高考之殇与痛则思变'},
                ],
                imgSrcList:[
                    'https://online-course.nos-eastchina1.126.net/123-1252130152859566080.png\n',
                    'https://online-course.nos-eastchina1.126.net/数据结构与算法 基础篇 拷贝-1252123020651134976\n' +
                    '.jpg\n',
                    'https://online-course.nos-eastchina1.126.net/%E5%B0%81%E9%9D%A2-1258625253353979904.png',
                    'https://online-course.nos-eastchina1.126.net/直播封面-1254953535796150272.png'
                ],
                flag:''
            }
        },
        created() {
                getSlideShow(5).then(res=>{
                    this.swiperList = res.data;
                })
        }
    }
</script>
<style scoped lang="less">
    @hoverColor:#00cf8c;
    #top-nav-box{
        margin: auto;
        width: 1200px;
        height: 30px;
    }
    /*轮播图*/
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    /deep/
    .el-carousel__arrow{
        width: 70px;
        height: 70px;
        font-size: 70px;
        background: none;
        color: blue;
    }
    /deep/
    .el-carousel__arrow:hover{
        background: none;
    }
    /*小点导航*/
    /deep/
    .el-carousel__button{
        width: 15px !important;
        height: 15px !important;
        border-radius: 50%;
    }
    .swiper-item{
        width: 100%;
        height: 340px;
        background-position: center;
        background-sizeY: 100%;
    }
    /deep/
    .el-carousel__container{
        height: 340px !important;
    }
    /*直播课程*/
    #live-box{
        margin: 70px auto 0px;
        width: 1200px;
        height: 418px;
        overflow: hidden;
        h2{
            margin: 0;
            margin-bottom: 30px;
            font-weight: normal;
        }
    }
    #live-content{
        display: flex;
        width: 100%;
        height: 375px;
    }
    #livePosters{
        position: relative;
        width: 600px;
        height: 100%;
    }
    #liveList{
        background-color: #f4f4f4;
        width: 600px;
        height: 100%;
        ul{
            padding: 0;
            list-style: none;
        }
        li{
            margin: 20px 0px;
            height: 50px;
            line-height: 50px;
        }

    }
    .saveColor{
        color: @hoverColor;
        background-color: #ffffff;
        .greenBlock{
            background-color: @hoverColor;
        }
    }
    #livePosters>img{
        position: absolute;
        left: 0px;
        width: 600px;
        height: 375px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: 0.5;
    }
    .greenBlock{
        display: block;
        float: left;
        width: 5px;
        height: 50px;
        background-color: #f4f4f4;
    }
    .liveStatus{
        margin-left: 50px;
        float: left;
    }
    .hook{
        margin-left: 50px;
        float: left;
    }
    .liveTitles{
        position: relative;
        top: 30px;
        z-index: 10;
        font-size: 24px;
        color: white;
    }
    .falseBox{
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0.5;
    }
    .trueBox{
        position: absolute;
        z-index: 100;
        width: 100%;
        height: 100%;
    }
    .liveSta{
        margin-top: 100px;
        width: 100%!important;
        color: white;
        font-size: 14px;
    }
    .liveBtn{
        width: 240px;
        height: 50px;
        font-size: 18px;
        background-color: @hoverColor;
    }
</style>